/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState, useMemo } from 'react';
// import { getData } from "../../../service";
import { Ellipsis, Image, Skeleton, Card } from 'antd-mobile'
import { data, IData, IItem, IIRecommend } from '../../../utils/mock'
import { useLocation, useNavigate } from 'react-router-dom';


import './index.less'

interface IRecommend {
    current: IIRecommend
}

const Recommend: React.FC<IRecommend> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            onClick={()=>(navigate(`/home/city?cityName=${current.title}`), window.scrollTo(0,0))}
            style={{display:'flex', padding: '12px', boxSizing: 'border-box', marginBottom: '16px'}}
            bodyStyle={{flex:1, padding: 0}}
            key={`recommend${current.id}`}
        >   
            <div className='m-city-recommend-nav-card'>
                <div className='nav-card-img'><img  alt="example" src={current.url} /></div>
                <div className='nav-card-content'>
                    <div className='nav-card-content-title'>{current.title}</div>
                    <Ellipsis
                        direction='end'
                        expandText='查看'
                        collapseText='收起'
                        rows={3}
                        content={current.desc}
                    />
                </div>
            </div>
        </Card>
    )
}
const Page: React.FC = ()=> {
    const { content } = data as IData

    const [loading, setLoading] = useState(false)

    const location = useLocation();
    
    const cityName = useMemo(()=>{
        const searchParams = new URLSearchParams(location.search);
        return searchParams.get('cityName')|| '北京游玩路线';
    },[location.search])

    const currentCity = useMemo(()=>{
        return [...content.recommend.list, ...content.hot.list].find((item: IItem)=> item?.title === (cityName || '北京游玩路线'))
    },[cityName])

    const recommendList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = content.recommend.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 6);
    },[content.recommend.list])

    
    // const initData = async () => {
    //     setLoading(true)
    //     try {   
    //         const { data: { list } } = await getData() as any
    //         // setTabs(list.content[0].content[1].content[0].theme.mdd)
    //         // setRows(list.content[0].content[1].content[0].modules)
    //         setLoading(false)
    //     } catch (e) {
    //         console.log('[getData get Data] error content ', e)
    //     }
    // }
    

    useEffect(()=>{
        // initData()
        setLoading(true)

        setTimeout(()=>{
            setLoading(false)
        },800)
    },[])

    if(loading){
        return <Skeleton.Paragraph lineCount={5} animated />
    }
    
    return (
        <div className='m-city-wrapper'> 
            <Card className='m-city-card'>
                <h2 className='title'>{currentCity?.title}</h2>
                <div className='content'>
                    <div className='m-city-desc'>
                        {currentCity?.desc}
                    </div>

                    <div className='m-city-image'>
                        <Image src={currentCity?.url} width={400 * 0.8} height={300 * 0.8} className='image'></Image>
                    </div>

                    <div className='m-more-city'>
                        <div className="m-more-city-title"> MORE CITY
                        </div>
                        <div className='m-more-city-nav'>
                            {
                                recommendList.map((item)=>
                                (<Recommend current={item} key={`recommend${item.id}`} />))
                            }
                        </div>
                    </div>

                </div>
            </Card>
            <div className='footer'>
                    Open-source MIT Licensed | 豫ICP备2023006723号-2 | Copyright © 2017-present
            </div>
        </div>
    )

}

export default Page